<template>
    <p>这是一个组件</p>
    {{ msg }}
    <div v-html="htmlSpan"></div>
    <!-- <img src="//www.baidu.com/img/flexible/logo/pc/index@2.png" alt="">
     <img v-bind:src="imgUrl" alt="">
    img: src="imgUrl" alt:>-->
    <button v-on:click="btnAction">点击</button>
    <button @click="btnAction">点击1111</button>

    <h1>v-if</h1>
    <p v-if="isActive">v-if is true</p>
    <p v-else>v-if is false</p>
    <p v-show="isActive">v-show</p>
    <button @click="switchIsActive">切换状态</button>

    <p v-if="num == 0">num is 0</p>
    <p v-else-if="num == 1">num is 1</p>
    <p v-else>num 非 0 非 1</p>
    <h1>v-for</h1>
    <button @click="changeNum(0)">num 设置为0</button>
    <button @click="changeNum(1)">num 设置为1</button>
    <button @click="changeNum(2)">num 设置为2</button>
    <p v-for="(item, index) in arr">item是{{ item }},index 是{{ index }}</p>
    <p v-for="(value, key, index) in obj">value是{{ value }},key 是{{ key }},index 是{{ index }}</p>
    <h1>v-model</h1>
    <h2>配置信息</h2>
    <div>
        <label>昵称</label>
        <input type="text" v-model="user.name">
    </div>
    <div>
        <label>性别</label>
        <input type="radio" name="sex" v-model="user.sex" value="男">男
        <input type="radio" name="sex" v-model="user.sex" value="女">女
    </div>
    <div>
        <label>心愿单</label>
        <input type="checkbox" name="wish" v-model="user.wish" value="iphone">iphone
        <input type="checkbox" name="wish" v-model="user.wish" value="ipad">ipad
        <input type="checkbox" name="wish" v-model="user.wish" value="iwatch">iwatch
        <input type="checkbox" name="wish" v-model="user.wish" value="其他">其他
    </div>
    <div>
        <label>组号</label>
        <select v-model="user.group" style="width: 100px">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>
    <div>
        <label>备注</label>
        <textarea v-model="user.remark"></textarea>
    </div>

    <h2>信息</h2>
    <p>昵称:{{ user.name }}</p>
    <p>性别:{{ user.sex }}</p>
    <p>心愿单:{{ user.wish }}</p>
    <p>组号:{{ user.group }}</p>
    <p>备注:{{ user.remark }}</p>
</template>

<script>
export default {
    data() {
        return {
            msg: "hello world",
            htmlSpan: "<span>这是一个html标签</span>",
            imgUrl: "//www.baidu.com/img/flexible/logo/pc/index@2.png",
            isActive: true,
            num: 0,
            arr: ['tom', 'jerry', 'dog', 'host'],
            obj: {
                a: 'tom',
                b: 'jerry',
                c: 'dog',
                d: 'host'
            },
            user: {
                name: "",
                sex: '男',
                wish: [],
                group: '',
                remark: ''
            }
        };
    },
    methods: {
        btnAction() {
            console.log("123");
            console.log('this.msg', this.msg);
            this.test()
        },
        test() {
            console.log("这是一个test 方法");
        },
        switchIsActive() {
            this.isActive = !this.isActive
        },
        changeNum(number) {
            this.num = number
        }
    }
}
</script>